<template>
  <div class="dispose-enterprise">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap" v-if="showStatus == 0">
        <el-form ref="formRef" :model="params">
          <el-row :gutter="50">
            <el-col :span="6">
              <el-form-item label="行政区划：">
                <el-tree-select
                  v-model="params.district"
                  :data="adminAreaList"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="5.5">
              <el-form-item label="状态：">
                <el-select
                  v-model="params.status"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in enterpriseStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称：">
                <el-input v-model="params.customername" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="getList"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Search /></el-icon
                  >查询</el-button
                >
                <el-button
                  class="add"
                  style="margin-left: 24px"
                  @click="handlerAdd"
                  ><el-icon
                    style="color: #fff; margin-right: 5px; font-size: 20px"
                    ><DocumentAdd /></el-icon
                  >新增</el-button
                >
                <el-button
                  type="danger"
                  style="margin-left: 24px"
                  @click="DeleteEnterprise"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Delete /></el-icon
                  >删除</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <button class="back" @click="handerBtn" v-if="showStatus != 0">
      <img src="@/assets/images/wasteenterprise/back-icon.png" alt="" />
      返回
    </button>
    <!-- 企业详情 -->
    <div class="enterprise-detail" v-if="showStatus == 1">
      <div class="main-wrap">
        <div class="title-name">
          <div class="line"></div>
          企业详情
        </div>
        <div class="detail-wrap">
          <div class="line">
            <div class="left">
              企业名称：{{ disposeEnterpriseDetail.enterprisename }}
            </div>
            <div class="right">
              企业类别：{{
                disposeEnterpriseDetail.enterprisetype == 1
                  ? "污染治理"
                  : disposeEnterpriseDetail.enterprisetype == 2
                  ? "第三方检测"
                  : disposeEnterpriseDetail.enterprisetype == 3
                  ? "环评咨询"
                  : "无"
              }}
            </div>
          </div>
          <div class="line">
            <div class="left">
              区域：{{ disposeEnterpriseDetail.districtname }}
            </div>
            <div class="right">
              详细地址：{{ disposeEnterpriseDetail.address }}
            </div>
          </div>
          <div class="line">
            <div class="left">
              年处置规模：{{ disposeEnterpriseDetail.wastedisposescale }}
            </div>

            <div class="right">
              <div class="right">
                状态：
                {{ disposeEnterpriseDetail.status == 1 ? "正常" : "停产" }}
              </div>
            </div>
          </div>
          <div class="line">
            <div class="right">
              环保管理员：{{ disposeEnterpriseDetail.contactperson }}
            </div>
            <div class="left">手机号：{{ disposeEnterpriseDetail.mobile }}</div>
          </div>
          <div class="line">
            <div class="left w">经营范围： <span></span></div>
            <div class="right">营业执照：</div>
          </div>
          <div class="line">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="disposeEnterpriseDetail.businessscope"
              placement="top-start"
            >
              <div class="left">
                {{ disposeEnterpriseDetail.businessscope }}
              </div>
            </el-tooltip>

            <div class="right">
              <img
                @click="searchImage(disposeEnterpriseDetail.creditimageurl)"
                :src="disposeEnterpriseDetail.creditimageurl"
                alt=""
              />
            </div>
          </div>
          <div class="line">
            <div class="right">守法证明：</div>
            <div class="left">资质证书：</div>
            <!-- <div class="right">营业执照：</div> -->
          </div>
          <div class="line">
            <div class="left">
              <img
                @click="searchImage(disposeEnterpriseDetail.lawimageurl)"
                :src="disposeEnterpriseDetail.lawimageurl"
                alt=""
              />
            </div>
            <div class="left">
              <img
                @click="
                  searchImage(disposeEnterpriseDetail.permitwasteimageurl)
                "
                :src="disposeEnterpriseDetail.permitwasteimageurl"
                alt=""
              />
            </div>
            <!-- <div class="right">
              <img :src="disposeEnterpriseDetail.creditimageurl" alt="" />
            </div> -->
          </div>
        </div>
      </div>
      <div class="edit">
        <el-button class="btn-edit" @click="editEnterpriseDetailMsg">
          <el-icon style="color: #fff; margin-right: 7px"><EditPen /></el-icon
          >编辑</el-button
        >
      </div>
    </div>
    <!-- 企业设施 -->
    <div class="enterprise-facility" v-if="showStatus == 2 && facilityListFlag">
      <div class="main-wrap">
        <div class="title-name">
          <div class="line"></div>
          企业设施
        </div>
      </div>
      <div class="enterprise-facility-title">
        <el-form :model="facilityParams">
          <el-row>
            <el-col :span="6">
              <el-form-item label="设施名称："
                ><el-input v-model="facilityParams.b" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态：">
                <el-select v-model="params.a" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="涉废类型：">
                <el-select v-model="params.a" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button
                type="primary"
                style="margin-left: 20px"
                @click="handleSearch"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Search /></el-icon
                >查询</el-button
              >
              <el-button
                type="danger"
                style="margin-left: 24px"
                @click="handleDelete"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Delete /></el-icon
                >删除</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table-wrap data-wrap">
        <el-table
          :data="facilityList"
          :show-overflow-tooltip="true"
          border
          class="table-height"
          style="width: 100%"
        >
          <el-table-column prop="date" align="center" label="设施名称" />
          <el-table-column prop="name" align="center" label="设施编号" />
          <el-table-column prop="name" align="center" label="联系人" />
          <el-table-column prop="name" align="center" label="联系方式" />
          <el-table-column prop="name" align="center" label="安装位置" />
          <el-table-column prop="name" align="center" label="状态" />
          <el-table-column label="操作" width="340" align="center">
            <template #default="{ row }">
              <div class="btn-wrap">
                <button
                  class="enterprise-detail-btn"
                  @click="facilityDetail(row.id)"
                >
                  企业详情
                </button>
                <button
                  class="close"
                  @click="editFacilityDetail(row.id, row.openflag)"
                >
                  关闭申报
                </button>
                <!-- <button class="stop">停用</button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding-right: 60px; margin-top: 20px">
          <Pagination
            v-model:currentPage="pagiFacilityParams.currentPage"
            :total="pagiFacilityTotal"
            v-model:page-size="pagiFacilityParams.pagesize"
          />
        </div>
      </div>
    </div>
    <!-- 企业详情 -->
    <div class="enterprise-detail" v-if="showStatus == 2 && !facilityListFlag">
      <div class="main-wrap">
        <div class="title-name">
          <div class="line"></div>
          企业设施
        </div>

        <div class="detail-wrap">
          <div class="line">
            <div class="left">二维码编号：23035821</div>
            <div class="right">设施名称：产污设施</div>
          </div>
          <div class="line">
            <div class="left">涉废类型：活性炭</div>
            <div class="right">处理设计风量（m³/h)：测试风量</div>
          </div>
          <div class="line">
            <div class="left">设计使用量(kg)：测试12</div>
            <div class="right">更换周期：30天</div>
          </div>
          <div class="line">
            <div class="left">环保管理员1：李强</div>
            <div class="right">手机号1：199368503985</div>
          </div>
          <div class="line">
            <div class="left">环保管理员2：李梦</div>
            <div class="right">手机号217889257</div>
          </div>

          <div class="line">
            <div class="left"><img src="" alt="" /></div>
            <div class="right"></div>
          </div>
        </div>
      </div>

      <div class="edit">
        <el-button class="btn-edit" @click="editFacilityDetailMsg">
          <el-icon style="color: #fff; margin-right: 7px"><EditPen /></el-icon
          >编辑</el-button
        >
        <el-button class="close-btn">
          <el-icon style="color: #fff; margin-right: 7px"
            ><CircleClose /></el-icon
          >停用</el-button
        >
      </div>
    </div>
    <!-- 表格 -->
    <div class="data-wrap" v-if="showStatus == 0">
      <el-table
        :data="tableData"
        :show-overflow-tooltip="true"
        border
        @selection-change="filterIds"
        class="table-height"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="60" />
        <el-table-column prop="districtname" align="center" label="所属行政区">
        </el-table-column>
        <el-table-column
          prop="enterprisename"
          align="center"
          label="企业名称"
        />
        <el-table-column
          prop="wastedisposescale"
          align="center"
          label="年处置规模"
        >
          <!-- <template #default="{ row }">
            <div></div>
          </template> -->
        </el-table-column>
        <!-- wastenum : 50 wasteunit : 2 -->
        <el-table-column
          prop="contactperson"
          align="center"
          label="联系人"
          width="120"
        />
        <el-table-column
          prop="mobile"
          align="center"
          label="联系方式"
          width="180"
        />
        <el-table-column prop="address" align="center" label="地址" />

        <el-table-column align="center" label="状态" width="100">
          <template #default="{ row }">
            <div>
              {{ row.status == 1 ? "正常" : "停产" }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" align="center" label="提交时间" /> -->
        <el-table-column prop="address" align="center" label="操作" width="290">
          <!-- b #CEE3FE    c  #0874FA   审核-->
          <template #default="{ row }">
            <div class="table-btn-wrap">
              <button
                style="
                  width: 109px;
                  height: 37px;
                  background: #ffe3cd;
                  color: #ff7403;
                  border-radius: 4px;
                "
                @click="searchEnterpriseDetail(row.id)"
              >
                企业详情
              </button>
              <!-- c #0874FA  b#CEE3FE 开通申报 -->
              <button
                class="openflag-btn"
                :style="[
                  row.openflag == 1
                    ? 'color: #FA1A1A;background: #FFCCCC'
                    : 'color: #448CFA;background: #CEE3FE',
                ]"
                @click="openDeclaration(row.id, row.openflag)"
              >
                {{ row.openflag == 1 ? "关闭申报" : "开通申报" }}
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-right: 60px; margin-top: 25px">
        <Pagination
          v-model:currentPage="params.page"
          :total="total"
          v-model:page-size="params.pagesize"
          @getDataList="getList"
        />
      </div>
    </div>

    <EditEnterpriseDetail
      v-model:showDialog="showEditEnterpriseDetail"
      @save="editEnterpriseDetailSave"
      :enterpriseDetail="disposeEnterpriseDetail"
      :addFlag="addFlag"
    />
    <!-- <EditFacilityDetail
      v-model:showDialog="showEditFacilityDetail"
      @save="editFacilityDetailSave"
    /> -->
    <OperationLog
      v-model:showDialog="operateFlag"
      :msg="msg"
      @save="operateSave"
    />
    <OperationLog
      v-model:showDialog="delOperateFlag"
      msg="确定要删除吗？"
      @save="DELOperateSave"
    />
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="showImg"
      @close="showImg = false"
      :url-list="srcList"
    />
  </div>
</template>
<script setup lang="ts">
import Pagination from "@/components/Pagination.vue";
import http from "@http";
import ElMessage from "@/components/ElMessage.js";
import RouteHeadLine from "@/components/RouteHeadLine.vue";
import OperationLog from "@/components/operateDialog";
import changeArea from "@/utils/changeArea.js";
// import Dialog from "@/components/DialogCross";
import EditEnterpriseDetail from "./editEnterpriseDetail";
import EditFacilityDetail from "./editFacilityDetail";
let params = reactive({ page: 1, pagesize: 10 });
let operateFlag = ref(false);
let handleSearch = () => {};
let delOperateFlag = ref(false);
let enterpriseStatusList = ref([]);
let deviceStatusList = ref([]);
let showImg = ref(false);
let srcList = ref([]);
let wasteList = ref([]);
let adminAreaList = ref([]);
let disposeEnterpriseDetail = ref({});
let unitList = ref([]);
let ids = ref("");
let total = ref(11);
let openIds = ref("");
let delIds = ref([]);
let openflag = ref("");
let addFlag = ref(false);
let msg = ref("");
let enterpriseTypeList = ref([]);
let facilityListFlag = ref(true);
let pagiFacilityParams = ref({});
let facilityList = ref([]); //企业设施列表
let searchWrapStyle = ref("146px");
let showEditEnterpriseDetail = ref(false); //企业详情弹框
let showEditFacilityDetail = ref(false); //企业设施弹框
let showDialog = ref(false);
let pagiFacilityTotal = ref(1);
//添加
let handlerAdd = () => {
  addFlag.value = true;
  showEditEnterpriseDetail.value = true;
};
let editFacilityDetailMsg = () => {
  showEditFacilityDetail.value = true;
};
let operateSave = () => {
  http({
    url: "/admPCEnterpriseThird/doPermitApply",
    data: { id: openIds.value, openflag: openflag.value },
  }).then((res) => {
    if (res.code == 0) {
      getList();
      operateFlag.value = false;
    }
  });
};
let facilityParams = reactive({}); // 企业设施查询参数
let form = reactive({});
/* 企业设施详情 */
let facilityDetail = (id) => {
  facilityListFlag.value = false;
};
/* 企业设施编辑 */
let editFacilityDetail = (id, status) => {
  console.log(id, status);

  showEditFacilityDetail.value = true;
};
let editEnterpriseDetailMsg = () => {
  showEditEnterpriseDetail.value = true;
};
let filterIds = (e) => {
  delIds.value = e.map((item) => item.id);
};
let DeleteEnterprise = () => {
  if (delIds.value.length == 0) {
    ElMessage({ msg: "请选择要删除的企业", type: "warning" });
    return;
  }
  delOperateFlag.value = true;
  // delIds
};
let DELOperateSave = () => {
  http({
    url: "/admPCEnterpriseThird/delete",
    data: { id: delIds.value.join(",") },
  }).then((res) => {
    if (res.code == 0) {
      getList();

      delOperateFlag.value = false;
    }
  });
};
let tableData = ref([]);
let showStatus = ref(0);
let options = ref([
  { label: "佛挡杀", value: 2 },
  { label: "佛挡杀", value: 2 },
]);
let handleAudit = () => {
  showDialog.value = true;
};
//企业详情弹框确认按钮
let editEnterpriseDetailSave = (id) => {
  if (id) {
    searchEnterpriseDetail(ids.value);
    showEditEnterpriseDetail.value = false;
  }
  showEditEnterpriseDetail.value = false;
  getList();
};
let searchImage = (url) => {
  srcList.value = [url];
  showImg.value = true;
};
//企业设施弹框确认按钮
let editFacilityDetailSave = () => {};
watch(
  () => showStatus.value,
  () => {
    if (showStatus.value == 0) {
      searchWrapStyle.value = "146px";
    } else {
      searchWrapStyle.value = "70px";
    }
  },
  { deep: true }
);

let searchEnterpriseDetail = (id) => {
  addFlag.value = false;
  ids.value = id;
  showStatus.value = 1;
  http({ url: "/admPCEnterpriseThird/detail", data: { id: ids.value } }).then(
    (res) => {
      if (res.code == 0) {
        disposeEnterpriseDetail.value = res.data;
      }
    }
  );
};
let getList = () => {
  http({ url: "/admPCEnterpriseThird/datalist", data: params }).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list;
      total.value = res.data.total;
      ElMessage({ msg: "操作成功" });
    }
  });
};
let handerBtn = () => {
  if (!facilityListFlag.value) {
    facilityListFlag.value = true;
    return;
  }
  getList();
  showStatus.value = 0;
};
let openDeclaration = (id, status) => {
  openIds.value = id;
  if (status == 1) {
    msg.value = "确定关闭申报吗？";
    openflag.value = 2;
  } else {
    msg.value = "确定开通申报吗？";
    openflag.value = 1;
  }

  operateFlag.value = true;
};
let diaBack = () => {
  console.log("-=-=");
  showDialog.value = false;
};
let diaSave = () => {};

let handleDelete = () => {};
onMounted(() => {
  http({ url: "/listitem/getmodule", data: { module: "B06" } }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      enterpriseStatusList.value = res.data.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  http({ url: "/listitem/getmodule", data: { module: "B02" } }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      deviceStatusList.value = res.data.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  http({ url: "/listitem/getmodule", data: { module: "B03" } }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      wasteList.value = res.data.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });

  http({ url: "/listitem/getmodule", data: { module: "B04" } }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      unitList.value = res.data.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
      console.log(unitList.value);
    }
  });
  http({ url: "/region/datalisttree" }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      adminAreaList.value = changeArea(res.data);
      console.log(adminAreaList.value, "value");
    }
  });
  getList();
});
</script>
<style lang="scss" scoped>
.dispose-enterprise {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .enterprise-facility {
    padding-left: 0;
    height: calc(100vh - 80px - 63px);
    background-color: #fff;
    padding-top: 25px;
    .table-wrap {
      margin-top: 0 !important;
      padding-left: 8px;
      padding-top: 0 !important;
      padding-right: 8px;
      .table-height {
        height: 480px !important;
      }
      .btn-wrap {
        display: flex;
        justify-content: space-between;
        padding-left: 19px;

        padding-right: 17px;
        button {
          width: 109px;
          height: 37px;
          border-radius: 4px;
        }
        .enterprise-detail-btn {
          background-color: #ffe3cd;
          color: #ff7403;
        }
      }
    }

    .enterprise-facility-title {
      :deep(.el-form-item__label) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 22px;
        color: #333333;
      }
      :deep(.el-form) {
        margin-top: 20px;
        padding-left: 30px;
      }
      :deep(.el-input) {
        width: 268px;
        height: 40px;
        background: #ffffff;
        border-radius: 4px;
        /* border: 1px solid #cccccc; */
      }

      :deep(.el-button) {
        width: 89px;
        height: 37px;

        border-radius: 4px;
        box-shadow: none;
      }
      :deep(.el-icon) {
        font-size: 15px !important;
      }
      :deep(.el-button--primary) {
        background-color: #0874fa !important;
      }
      :deep(.el-input__inner) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
      }
      :deep(.el-input__inner::placeholder) {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #999999;
      }
      :deep(.el-button--danger) {
        background-color: #fa0808 !important;
      }
    }
    .title-name {
      display: flex;
      align-items: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #333333;

      .line {
        width: 5px;
        height: 36px;
        background: #0874fa;
        margin-right: 26px;
      }
    }
  }
  .enterprise-detail {
    height: calc(100vh - 80px - 63px);
    background-color: #fff;
    padding-top: 25px;
    display: flex;
    .edit {
      flex: 1;
      .close-btn {
        margin-left: 20px;
        width: 108px;
        height: 37px;
        background: #fa0808;
        border-radius: 4px;

        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
      }
      .btn-edit {
        padding-left: 5px;
        width: 108px;
        height: 37px;
        background: #0874fa;
        border-radius: 4px;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
      }
    }
    .main-wrap {
      flex: 1.2;
      .detail-wrap {
        margin-top: 20px;
        border: 1px solid #cccccc;
        margin-left: 30px;
        padding-left: 28px;

        overflow: scroll;
        .line {
          margin-top: 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 500;
          font-size: 20px;
          color: #333333;

          .left {
            flex: 1;
            align-self: flex-start;
            line-height: 30px;

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
            img {
              width: 263px;
              height: 170px;
              border: 1px solid #cccccc;
            }
          }
          .left.w {
            align-self: flex-start !important;
          }
          .right {
            flex: 1;
            text-align: left;
            img {
              width: 263px;
              height: 170px;
              border: 1px solid #cccccc;
            }
          }
        }
      }
      .title-name {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 28px;
        color: #333333;

        .line {
          width: 5px;
          height: 36px;
          background: #0874fa;
          margin-right: 26px;
        }
      }
    }
  }
  .back {
    margin-top: 10px;
    width: 94px;
    height: 43px;
    background: #9dafc1;
    border-radius: 4px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    img {
      width: 21px;
      height: 17px;
    }
  }
  .title-wrap {
    height: v-bind("searchWrapStyle");
    background: #ffffff;
    padding-top: 20px;

    /* width: 100%; */
    .search-wrap {
      margin-top: 30px;
      padding-left: 35px;
      padding-right: 43px;
      .add {
        background-color: #009944;
        box-shadow: none;
        color: #fff;
        width: 89px;
        height: 37px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
      }
    }
  }
  .content {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .table-btn-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    button {
      width: 109px;
      height: 37px;
      border-radius: 4px;
    }
    .openflag-btn {
      width: 109px;
      height: 37px;

      color: #fa0808;
      border-radius: 4px;
    }
    /* .enterprise-detail-btn {
      font-weight: 400;
      font-size: 19px;
      color: #ff7403;
      background-color: #ffe3cd;
    }

    .declaration {
      font-weight: 400;
      font-size: 19px;
      color: #0874fa;
      background: #cee3fe;
    } */
  }
  .data-wrap {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 80px - 10px - 146px);
    background: #fff;
    padding: 10px 8px 0 8px;
    .table-height {
      max-height: calc(100vh - 36.5vh);
      overflow-y: scroll;

      button {
        width: 115px;
        height: 39px;
        background: #e5efff;
        border-radius: 5px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #0874fa;
      }
    }
  }
}
</style>
